<template>
  <a-spin :spinning="spinning">
    <a-empty v-if="$isEmpty(stepList)" class="p-y-40"></a-empty>
    <a-timeline v-else>
      <a-timeline-item v-for="(item, index) in stepList" :key="index">
        <a-descriptions :column="2" :title="`${item.ModifyType} ${item.ModifyDate}`" bordered size="small">
          <a-descriptions-item label="项目名称"> {{ item.Name }} </a-descriptions-item>
          <a-descriptions-item label="户型"> {{ item.Structure }} </a-descriptions-item>
          <a-descriptions-item label="房间号"> {{ item.Roof }}栋{{ item.Unit }}单元{{ item.Floor }}-{{ item.Number }} </a-descriptions-item>
          <a-descriptions-item label="面积"> {{ item.Area }}㎡ </a-descriptions-item>
          <!-- <a-descriptions-item label="房屋状态">{{ item.Stage }}</a-descriptions-item> -->
          <a-descriptions-item label="入住人姓名">{{ item.Proposer || '/' }}</a-descriptions-item>
        </a-descriptions>
      </a-timeline-item>
    </a-timeline>
  </a-spin>
</template>

<script>
/**
 *Parser
 *@Author
 *@Version
 *@property
 *@event
 */
import { getFenHousesIdDetail } from '@/api/DistrictReviewReportManagement'
export default {
  props: {
    houseID: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      spinning: false,
      stepList: []
    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      this.spinning = true
      getFenHousesIdDetail({
        id: this.houseID
      }).then((res) => {
        this.stepList = res
      }).finally(() => {
        this.spinning = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-steps {
  overflow: unset;
  // &::-webkit-scrollbar {
  //   display: none;
  // }
  .ant-steps-item {
    overflow: unset;
    flex: unset;
    .ant-steps-item-content {
      overflow: hidden;
      .ant-steps-item-description {
        max-width: unset;
        display: block;
      }
    }
  }
}
</style>
